<template>
	<view class="category">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: wanlsys.height + 'px' }">
			<view class="cu-bar fixed bg-white" :style="{ height: wanlsys.height + 'px', paddingTop: wanlsys.top + 'px'}">
				<span class="cu-title">积分商城</span>
				<!-- #ifndef MP -->
				<view class="action" @tap="showModal('menu')">
					<text class="wlIcon-gengduo"></text>
					<view class="cu-tag badge" v-if="( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum ) > 0">{{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}}</view>
				</view>
				<!-- #endif -->
			</view>
		</view>


		
		<view class="cu-shop-address">
			<view class="cu-shop-address-name" @tap="toStoreDisplay">
				<text v-if="user.isLogin">{{addressData.shopname}}（{{addressData.city}}）</text>
				<text v-else>请先登录</text>
				<text class="wlIcon-fanhui2 wanl-black"></text>
			</view>
			<view class="cu-shop-address-distance">
				<text class="wlIcon-weizhi1"></text>
				<text class="address-distance-text">距离您{{addressData.distance}}</text>
			</view>
			<view class="cu-shop-address-details">
				<view class="cu-shop-address-details-l">
					门店详细信息
				</view>
				<view class="cu-shop-address-details-r" @tap="toStoreDetail">
					<text>点击查看</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
		</view>
		<view class="wanl-category" >
			<scroll-view scroll-y scroll-with-animation class="wanl-category-left" :scroll-top="scrollTop" :style="{ height: height + 'px'}">
				<view
					v-for="(item,index) in classListData.modulesData.categoryModules" :key="item.id"
					class="category-item"
					:class="[currentTab == index ? 'active' : '']"
					:data-current="index"
					@tap.stop="swichNav(item.id,$event)"
				>
					<text>{{ item.name }}</text>
				</view>
				<view class="edgeInsetBottom"></view>
			</scroll-view>
			
			<block>
				
				<scroll-view  scroll-y class="wanl-category-right" :style="{ height: height + 'px' }" >
					<view v-if="commodityData[0].list.length!=0">
						<view class="list-item" v-for="(child,chikey) in commodityData[0].list" :key="child.id" @tap="toGoods(child.id,0)">
							<view class="list-item-img">
								<image :src="$wanlshop.oss(child.image)" mode="widthFix"></image>
							</view>
							<view class="list-item-contenr">
								<view class="list-item-title">
									{{child.title}}
								</view>
								<view class="list-item-bottom">
									<view class="list-item-bottom-l">
										{{child.price}}积分起
									</view>
									<view class="list-item-bottom-r" @tap.stop="toGoods(child.id,1)">
										选规格
									</view>
								</view>
							</view>
						</view>
					</view>
					
					
					
					<view v-else>
						<wanl-empty style="padding: 0;padding-top: 50rpx;" text="无数据"/>
					</view>
					
					<view class="edgeInsetBottom"></view>
				</scroll-view>
				

			</block>

		</view>
		
		<!-- 模态框 -->
		<view class="WANL-MODAL">
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop="">
					<wanl-direct  @change="hideModal"/>
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share 
						:scrollAnimation="scrollAnimation" 
						shareTitle="我发现了一个很好的线上购物商城，这是商城类目" 
						shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱" 
						:image="$wanlshop.appstc('/common/logo.png')"
						:href="common.appConfig.domain+'/pages/tabBar/category/category?QRtype=category'"
					@change="hideModal"/>
				</view>
			</view>
		</view>
	
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			wanlsys: this.$wanlshop.wanlsys(),
			height: 0, //scroll-view高度
			currentTab: 0, //预设当前项的值
			scrollTop: 0 ,//tab标题的滚动条位置
			modalName: null,
			scrollAnimation: 300,
			longitude:0, // 经度
			latitude:0, // 纬度
			addressData:{
				distance:"0km",
				city:"定位中...",
				shopname:"加载中..."
			}, // 门店地址信息
			classListData:{modulesData:{categoryModules:[]}}, //分类列表数据
			commodityData:[{list:[]}], // 分类的商品信息
		};
	},
	computed: {
		...mapState(['common','statistics','cart'])
	},
	onLoad() {
		
		// 获取商家门店地址
		this.getUserAddress();
		// 获取分类列表
		this.getClassList();

		// #ifdef APP-PLUS
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height;
		// #endif
		// #ifdef H5
		this.height = this.wanlsys.windowHeight + this.wanlsys.windowBottom - this.wanlsys.height - 50;
		// #endif
		// #ifdef MP
		this.height = this.wanlsys.windowHeight - this.wanlsys.height;
		// #endif
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.height = this.height - uni.upx2px(180);
	},
	
	methods: {
		// 获取商家门店地址
		getUserAddress() {
			const self = this;
			uni.getLocation({
				altitude: true,
				success: res=> {
					let { longitude, latitude} = res;
					this.longitude = longitude;
					self.latitude = latitude
					// 获取订单
					self.$api.get({
						url: `${self.$wanlshop.config('appurl')}/wanlshop/shop/userselect`,
						data: {
							longitude: longitude,
							latitude: latitude,
						},
						header: { token: this.$store.state.user.token },
						success: resData => {
							self.addressData = resData;
							self.$store.state.user.shop_id = resData.id;
							self.$forceUpdate();
						}
					});
				}
			})
		},
		// 获取分类列表
		getClassList(){
			this.$api.get({
				url: `${this.$wanlshop.config('appurl')}/wanlshop/common/init`,
				header: { token: this.$store.state.user.token },
				success: res => {
					// 根据分类列表获取商品
					this.getCommodityList(res.modulesData.categoryModules[0].id);
					this.classListData = res;
				}
			});
		},
		// 根据分类列表获取商品
		getCommodityList(id){
			console.log(id)
			uni.showLoading({
				title: "加载中"
			});
			this.$api.get({
				url: `${this.$wanlshop.config('appurl')}/wanlshop/page/category`,
				data: {
					col: "col-1-2-2",
					data:JSON.stringify([{
						"categoryId":id,"textColor":"","describe":"","tags":""
					}]) ,
				},
				header: { token: this.$store.state.user.token },
				success: res => {
					this.commodityData = res;
					uni.hideLoading();
				}
			});
		},

		// 跳转商品信息页
		toGoods(id,state){
			console.log(id)
			console.log(state)
			uni.navigateTo({
				url: `/pages/product/goods?id=${id}&pop=${state}`
			})
		},			
		// 跳转店铺展示页面
		toStoreDisplay(){
			if(this.$store.state.user.isLogin){
				uni.navigateTo({
					url:"../../shop/storeDisplay/storeDisplay"
				})
			}else{
				uni.navigateTo({
					url: '../../user/auth/auth'
				})
			}

		},
		// 跳转店铺详情页面
		toStoreDetail(){
			uni.navigateTo({
				url:`../../shop/storeDetail/storeDetail?id=${this.addressData.id}`
			})
		},
		// 点击标题切换当前页时改变样式
		swichNav(id,e) {
			this.getCommodityList(id);
			let cur = e.currentTarget.dataset.current;
			console.log(cur)
			if (this.currentTab == cur) {
				return false;
			} else {
				this.currentTab = cur;
				this.checkCor();
			}
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			if(name == 'share' && this.modalName != 'share'){
				setTimeout(() => {
					this.scrollAnimation= 0;
				}, 300);
			}
			this.modalName = name;
		},
		hideModal(name) {
			if (name) {
				this.showModal(name);
			}else{
				this.modalName = null;
			}
		},
		//判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor() {
			if (this.currentTab > 7) {
				this.scrollTop = 500;
			} else {
				this.scrollTop = 0;
			}
		},
		productList(category_id, category_name) {
			this.$wanlshop.to(`/pages/product/list?data=${JSON.stringify({ category_id: category_id, category_name: category_name })}`);
		},
		productSearch(text) {
			this.$wanlshop.to(`/pages/product/search?keywords=${text}`,'fade-in',100);
		}
	}
};
</script>
<style>
	.empty-content{
		padding: 0 !important;
	}
	.cu-list.grid.no-border{
		padding: 25rpx;
	}
	.cu-list.grid.no-border>.cu-item {
		padding: 25rpx 0;
		align-items: center;
	}
	.cu-list.grid.no-border>.cu-item image{
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 10rpx; 
	}

	.cu-custom .cu-bar{
		z-index: 99;
		background: #FD8464;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu-title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.action{
		margin-left: auto;
	}
	.cu-shop-address{
		height: 180rpx;
		background: #FFFFFF;
		padding: 28rpx 22rpx 26rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.cu-shop-address-name{
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: bolder;
		color: #000000;
	}
	.cu-shop-address-name .wlIcon-fanhui2{
		color: #000000;
	}
	.cu-shop-address-details{
		display: flex;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	.cu-shop-address-details-r{
		margin-left: auto;
	}
	.cu-shop-address-distance{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
	}
	.address-distance-text{
		margin-left: 16rpx;
	}
	
	.wanl-category-left{
		width: 177rpx;
		background: #F4F4F4;
	}
	.wanl-category-left{width: 177rpx;}
	.wanl-category-left .category-item{
		padding: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		text-align: center;
	}
	.wanl-category-left .category-item.active{
		color: #ED6247;
	}
	.wanl-category-right{
		width: auto;
	}
	
	.wanl-category-right{
		flex: 1;
		background: #ffffff;
		padding: 0 22rpx;
		/* padding-right: 32rpx; */
		box-sizing: border-box;
	}
	.list-item-img{
		width: 160rpx;
		height: 160rpx;
		background: #FFFFFF;
		border: 2rpx solid #ED6247;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list-item-contenr{
		margin-left: 20rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}
	.list-item-title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}
	.list-item-bottom{
		display: flex;
	}
	.list-item-bottom-l{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ED6247;
		margin: auto 0;
	}
	.list-item-bottom-r{
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		background: #ED6247;
		border-radius: 24rpx;
		margin-left: auto;
		/* padding: 6rpx 16rpx; */
		margin-right: 20rpx;
	}
	.edgeInsetBottom{
		height: 20rpx;
	}
	.wanl-category .wanl-category-right .list-item{
		margin-top: 20rpx;
		margin-bottom: 0;
	}
	.wanl-category-right .list-item{
		display: flex;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		padding: 0;
		width: 522rpx;
	}
	
	
	
	/* #ifdef MP */
	.cu-bar .search-form{
		margin: 0 0 0 25rpx;
	}
	/* #endif */
</style>